<template>
<!-- 商品列表页 -->
  <div class="product-list">
    <div ref="headerHeight">
      <!-- 商品搜索功能 -->
      <!-- 子传父自定义事件 -->
      <ProductListHeader @search="fnSearch"></ProductListHeader>
      <!-- 商品排序功能 -->
      <ProductListSort @sortFn="fnSort"></ProductListSort>
    </div>
    <div ref="contentHeight">
      <!-- 商品内容 -->
      <!-- 父传子值绑定 -->
      <ProductListContent :list="listF" @refresh="refresh"></ProductListContent>
    </div>
  </div>
</template>

<script>
import ProductListHeader from './components/productListHeader.vue'
import ProductListSort from './components/productListSort.vue'
import ProductListContent from './components/produvtListContent.vue'

// 把数据都获取到父组件在通过 父传子props 把数据传到对于的子组件中去
import {list} from '../../api/index.js'
export default {
  components:{
    ProductListHeader,
    ProductListSort,
    ProductListContent
  },
  data(){
    return {
      listF: [],
      newList:[],
      orderBy:'default',
      pageNum:1,
      pageSize:10,
      headerHeight:0
    }
  },
  mounted(){
      this.$nextTick(()=>{
        // clientHeight 元素本身的高度
        this.$refs.contentHeight.style.height = window.screen.height - this.$refs.headerHeight.clientHeight + 'px'
      })
  },
  methods:{
    getList(params){
      list(params,(res)=>{
      this.listF = res.data.data.list
    })
  },
  // 刚加载就会刷新
  refresh(obj){
    this.getList({pageNum:this.pageNum,pageSize:this.pageSize})
    obj.loading = false
    // 默认listF和pageSize是相等的到最后一组数据时this.pageSize不等于10所以与listF不相等执行语句里面的代码
    // 不相等obj.finished = true就结束
    if(this.listF.length !== this.pageSize){
      obj.finished = true
    }
    console.log(this.listF);
    // this.listF = this.listF.concat()
  },
    // 通过sort遍历对象 通过这个方法来达到升序降序
    // 给sort传入参数 a,b
    // 当 a-b 时 从小到大
    // 当 b-a 时 从大到小
    fnSort(index){
      if(index == 1){
        // this.listF.sort((a,b)=> a.id-b.id)
        this.orderBy = 'default'
        this.getList({orderBy:this.orderBy})
      }else if(index == 2){
        // this.listF.sort((a,b)=> a.price-b.price)
        this.orderBy = 'price_asc'
        this.getList({orderBy:this.orderBy})
      }else if(index == 3){
        // this.listF.sort((a,b)=> b.price-a.price)
        this.orderBy = 'price_desc'
        this.getList({orderBy:this.orderBy})
      }else{
        alert('目前还没有该功能')
      }
    },
    // 搜索功能还没有实现
    fnSearch(goods){
      if(!goods.trim()){
        return this.listF
      }
      for(let item of this.listF){
        if(item.name.indexOf(goods) != -1 || item.subtitle.indexOf(goods)){
          this.newList.push(item)
        }
      }
      // console.log(this.newList);
    }
  }
}
</script>

<style scoped>
  .product-list{
    width: 100%;
  }
  .product-list>div{
    height: 200px;
  }
</style>